import React from 'react';
import {Link} from 'react-router-dom';
import {Table, Divider, Popover, Popconfirm, Pagination} from 'antd';
import classnames from 'classnames';
import cssModules from 'react-css-modules';
import styles from './style.less';
import {random6} from '../../util/tool.js';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';

@inject('CardLossStore', 'CardLossRestoreStore', 'CommonModalStore')
@observer
@cssModules(styles)
class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.CardLossStore;
  }
  onChange = pageNumber => {
    const {tableParams, getCardInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: pageNumber,
    };
    getCardInfo(params);
  };
  onShowSizeChange = (current, pageSize) => {
    const {tableParams, getCardInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: current,
      pageSize: pageNumber,
    };
    getCardInfo(params);
  };
  createColumns() {
    const {onRestore} = this.props.CardLossRestoreStore;

    const columns = [
      {
        title: '序号',
        dataIndex: 'cardId',
        align: 'center',
        render: (text, record, index) => {
          return <span>{index + 1}</span>;
        },
      },
      {
        title: '卡号',
        dataIndex: 'cardNumber',
        align: 'center',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
      },
      {
        title: '卡片类型',
        dataIndex: 'cardType',
        align: 'center',
        render: (text, record) => {
          let obj = {1: '业主卡', 2: '工作卡'};
          return <span>{obj[text]}</span>;
        },
      },
      {
        title: '使用者',
        dataIndex: 'name',
        align: 'center',
      },

      {
        title: '所属户室',
        dataIndex: 'blockAndUnit',
        align: 'center',
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record) => (
          <span>
            <span
              className={styles['restore']}
              onClick={() => {
                onRestore(record, this.props.CommonModalStore);
              }}>
              <i className={classnames('iconfont iconhuifu')}></i>
              <span>恢复卡片</span>
            </span>
          </span>
        ),
      },
    ];

    return columns;
  }

  render() {
    const {
      tableData,
      loading,
      onSelectChange,
      selectedRowKeys,
    } = this.props.CardLossStore;
    let scope = this;
    const rowSelection = {
      selectedRowKeys: toJS(selectedRowKeys),
      onChange: onSelectChange,
    };
    return (
      <Table
        rowSelection={rowSelection}
        styleName={'table-wrap'}
        columns={this.createColumns()}
        dataSource={tableData.data}
        loading={loading}
        pagination={{
          total: tableData.total || 0,
          pageSize: parseInt(tableData.pageSize),
          current: parseInt(tableData.pageNo),
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: total => {
            return `共 ${total} 条`;
          },
          onChange: this.onChange,
          onShowSizeChange: this.onShowSizeChange,
        }}
        rowKey={(record, index) => {
          return record.cardId;
        }}
      />
    );
  }
}

export default DataTable;
